<template>
    <basic-container>
      <avue-crud :data="data"
       :option="option"
       :page="page"
        @refresh-change="refreshChange"
        @search-change="searchChange"
        @search-reset="searchReset"
        @current-change="currentChange"
        @size-change="sizeChange"
        @on-load="onLoad"
        >
        <!-- 是否显示插槽 -->
			<template slot-scope="{row}" slot="jobStatus">
				<el-switch
         @change="rowSwitchChange(row)"
          v-model="row.jobStatus"
          active-value="NORMAL"
           inactive-value="PAUSED"
           active-color="#13ce66"
           inactive-color="#ff4949">
				</el-switch>
			</template>
      <template slot="menuLeft">
        <el-button size='mini' type="primary" @click="add" v-has="'/mall-cloud-task/task/addJob'">+ 新增</el-button>
      </template>
      <!-- 编辑按钮 -->
      <template slot-scope="{row,type,size}" slot="menu">
				<el-button :type="type" :size="size" v-if="row.jobStatus !='NORMAL'" @click="editNew(row)" v-has="'/mall-cloud-task/task/editJob'">编辑</el-button>
        <el-button :type="type" :size="size" @click="delNew(row)" v-has="'/mall-cloud-task/task/delJob'">删除</el-button>
			</template>
    </avue-crud>
        <!-- 编辑弹出框 -->
            <el-dialog title="编辑" :before-close="closeDia" :visible.sync="editBox"  width="50%">
          <div class="bigBox">
              <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="80px">
              <el-form-item label="任务分组" prop="jobGroup" >
                <el-input v-model="formData.jobGroup" autocomplete="off" size='mini' :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="任务类型" prop="jobName">
                <el-input v-model="formData.jobName" autocomplete="off" size='mini' :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="任务描述"  prop="jobDescription">
                <el-input v-model="formData.jobDescription"  size='mini' :disabled="true"></el-input>
              </el-form-item>
                <el-form-item label="注：">
                <p>字段   允许值 允许的特殊字符</p>
                <p>1、秒      0-59     - * /</p>
                <p>2、分      0-59     - * /</p>
                <p>3、小时   0-23    - * /</p>
                <p>4、日期   1-31    - * ? / L W C</p>
                <p>5、月份   1-12 或者 JAN-DEC    - * /</p>
                <p>6、星期   1-7 或者 SUN-SAT    - * ? / L C #</p>
                <p>7、年（可选） 留空,   1970-2099    - * /</p>
                <p><el-link type="primary" href="http://cron.qqe2.com/" target="_blank">点击生成复制</el-link></p>
              </el-form-item>
              <el-form-item label="表达式"  prop="cronExpression">
                <el-input v-model="formData.cronExpression" size='mini'></el-input>
              </el-form-item>
            </el-form>
              </div>
            <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="editBtn('ruleForm')" size='mini'  :loading="editLoad"  v-has="'/mall-cloud-task/task/editJob'"> 确 定</el-button>
          </div>
        </el-dialog>
        <!-- 添加弹出框 -->
        <el-dialog title="新增" :visible.sync="box"  width="50%" >
          <div class="bigBox">
              <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="80px">
              <el-form-item label="任务分组" prop="jobGroup" >
                <el-input v-model="formData.jobGroup" autocomplete="off" size='mini'></el-input>
              </el-form-item>
              <el-form-item label="任务类型" prop="jobName">
                <el-input v-model="formData.jobName" autocomplete="off" size='mini'></el-input>
              </el-form-item>
              <el-form-item label="任务描述"  prop="jobDescription">
                <el-input v-model="formData.jobDescription" size='mini'></el-input>
              </el-form-item>
                <el-form-item label="注：">
                <p>字段   允许值 允许的特殊字符</p>
                <p>1、秒      0-59     - * /</p>
                <p>2、分      0-59     - * /</p>
                <p>3、小时   0-23    - * /</p>
                <p>4、日期   1-31    - * ? / L W C</p>
                <p>5、月份   1-12 或者 JAN-DEC    - * /</p>
                <p>6、星期   1-7 或者 SUN-SAT    - * ? / L C #</p>
                <p>7、年（可选） 留空,   1970-2099    - * /</p>
                <p><el-link type="primary" href="http://cron.qqe2.com/" target="_blank">点击生成复制</el-link></p>
              </el-form-item>
              <el-form-item label="表达式"  prop="cronExpression">
                <el-input v-model="formData.cronExpression" size='mini'></el-input>
              </el-form-item>
            </el-form>
              </div>
            <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addBtn('ruleForm')" size='mini' :loading="addLoad" v-has="'/mall-cloud-task/task/addJob'">确 定</el-button>
          </div>
        </el-dialog>   
      </basic-container>
</template>
<script>
import {
    getJobs,
    updataJob,
    addJob,
    removeJob,
    pauseJob,
    resumeJob
} from "@/api/admin/timeingtask";
export default {
      data() {
      return {
          editLoad:false,
          addLoad:false,
      // 旧的任务分组
      oldJobName:'',
      oldJobGroup:'',
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
        box:false,
        editBox:false,
        formData:{
          jobGroup:'',
          jobName:'',
          cronExpression:'',
          jobDescription:''
        },
        rules: {
          jobName:[
            { required: true, message: '请输入任务类型', trigger: 'blur' },
          ],
          jobGroup:[
            { required: true, message: '请输入任务分组', trigger: 'blur' },
          ],
          jobDescription:[
             { required: true, message: '请输入任务描述', trigger: 'blur' },
          ],
          cronExpression:[
             { required: true, message: '请输入周期表达式', trigger: 'blur' }
          ]
        },
        data:[],
        option:{
          size: 'mini',
           border:true,
          editBtn:false,
          addBtn:false,
          delBtn:false,
          // height: 'auto',
           // calcHeight: 380,
          index: true,
          page:false,
          align:'center',
          menuAlign:'center',
		  menuWidth: 100,
		  searchMenuSpan:6,
          column:[
            {
              label:'创建日期',
              prop:'createTime',
              type: "datetime",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
               rules: [{
                   required: true,
                   message: "请输入创建日期",
                   trigger: "blur"
            }]
            },
            {
              label:'任务分组',
              prop:'jobGroup',
              rules: [{
                   required: true,
                   message: "请输入任务分组",
                   trigger: "blur"
            }]
            },
             {
              label:'任务状态',
              prop:'jobStatus',
              rules: [{
                   required: true,
                   message: "请输入任务状态",
                   trigger: "blur"
            }],
             dicData: [
              {
                label: "关闭",
                value: 'PAUSED'
              },
              {
                label: "正常",
                value: 'NORMAL'
              },
               {
                label: "不存在",
                value: 'NONE'
              },
               {
                label: "完成",
                value: 'COMPLETE'
              },
               {
                label: "错误",
                value: 'ERROR '
              },
              {
                label: "阻塞",
                value: 'BLOCKED '
              },
            ],
            },
             {
              label:'任务类型',
              prop:'jobName',
			  width:300,
               rules: [{
                   required: true,
                   message: "请输入任务类型",
                   trigger: "blur"
            }]
            }, {
              label:'周期表达式',
              prop:'cronExpression',
              rules: [{
                   required: true,
                   message: "请输入执行周期表达式",
                   trigger: "blur"
            }]
            }, 
              {
                  label:'描述',
                   prop: "jobDescription",
				   width:300,
                   search: true,
                   fixed: false,
                   rules: [{
                   required: true,
                   message: "请输入描述",
                   trigger: "blur"
            }]
            },
              {
              label: '暂停/恢复',
			  prop: 'jobStatus',
			  type: 'switch',
			  slot: true,
              cell: true,
            }
          ]
        },
      };
    },
    watch:{
        box(val){
            if(!val){
                this.$nextTick(()=>{
                    this.$refs["ruleForm"].resetFields();
                })
                this.addLoad=false
            }
        },
        editBox(val){
            if(!val){
                this.$nextTick(()=>{
                    this.$refs["ruleForm"].resetFields();
                })
                this.editLoad=false
            }

        },
    },
    methods: {
      // 点击页数
      currentChange (currentPage) {
      this.page.currentPage = currentPage;
    },
    // 点击页数
     sizeChange (pageSize) {
      this.page.pageSize = pageSize;
    },
    // 添加
    add(){
      this.box=true
      this.formData={}
    },
  addBtn(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
              this.addLoad=true
            addJob(this.formData).then((res)=>{
                if(res.status==200){
                    this.addLoad=false
                    this.box=false
                    this.onLoad(this.page);
                    this.$message({
                        type:'success',
                        message:'操作成功！'
                    })
                }else if (res.status==500){
                    this.addLoad=false
                    this.box=false

                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
  },
  closeDia(){
    this.editBox=false
    this.formData={}
  },
  editBtn(formName){
    this.$refs[formName].validate((valid) => {
          if (valid) {
              this.editLoad=true
        updataJob(this.formData).then((res)=>{
            if(res.status==200){
                this.editLoad=false
                this.$message({
                    type:"success",
                    message:"编辑成功！"
                })
                this.editBox=false
                this.onLoad(this.page);
            }else if(res.status==500){
                this.editLoad=false
                this.editBox=false
            }
        })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
  },
      // 编辑弹框
      editNew(row){
        this.oldJobGroup=row.jobGroup
        this.oldJobName=row.jobName
        this.editBox=true
        this.formData=row
      },
  
      // 删除
   delNew(row){ 
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return removeJob(row.jobGroup,row.jobName);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          
        });
    },
     // 改变显示与隐藏
    rowSwitchChange(row) {
      if(row.jobStatus=="PAUSED"){
        pauseJob(row.jobGroup,row.jobName).then(()=>{
           this.onLoad(this.page);
           this.$message({
            type: "success",
            message: "关闭成功!"
          });  
        })

      }else{
        resumeJob(row.jobGroup,row.jobName).then(()=>{
          this.onLoad(this.page);
           this.$message({
            type: "success",
            message: "开启成功!"
          });
        })
      }
			},
    onLoad (page, params = {},done) {//页面初始化请求管理员列表
        getJobs(page.currentPage,page.pageSize,Object.assign(params, this.query)).then(res=>{
            if(done){
                done();
            }
            this.data=res.data.data
            this.page.total=res.data.count
        })
    },
     searchReset () {
      this.query = {};
      this.onLoad(this.page);
    },
   // 搜索框
   searchChange(params,done) {
     this.page.currentPage=1
      this.query = params;
      this.onLoad(this.page, params,done);
      },
     refreshChange({page,searchForm}){
        this.onLoad(this.page);
     }
    }
    
}
</script>
<style scoped>
.bigBox{
  width: 60%;
}
</style>


